<template>
	<view class="last_shell">
		<!-- <headnav></headnav> -->
		<view class="box">
			<u-tag text="大师" type="success" plain  size="mini"
			icon="/static/people/people (2).png"  class="head_identity"></u-tag>
             <u-avatar :src="src" shape="square" size="81"></u-avatar>
		</view>
		<view class="people_menu">
			<u-cell>
				<view class="money_right" slot="right-icon">
					<view class="prompt_text text__box">
						{{time == '0'?"早上好":time == '1'?"下午好":"晚上好"}}{{promptText == '0'?"，先生":"，女士"}}
					</view>
				</view>
			</u-cell>
			<u-cell  title="今日收益">
				<view class="money_right" slot="right-icon">
					<u-icon name="rmb-circle" color="#2979ff" size="28"></u-icon>
					<u-count-to :startVal="0" :endVal="8000" separator="," :bold="true"></u-count-to>
				</view>
			</u-cell>
			<u-cell  title="我的团队">
					 <u-avatar-group
								:urls="urls"
								size="35"
								gap="0.4"
								slot="right-icon"
						></u-avatar-group>
			</u-cell>
		</view>
		
		 <view  class="other_menu">
		        <swiper
		                        :indicator-dots="true"
		                        class="swiper"
								:autoplay="false"
		                >
		                    <swiper-item>
		                        <u-grid :border="true">
		                            <u-grid-item
		                                    :customStyle="{width:220+'rpx',height:220+'rpx'}"
		                                    v-for="(item, index) in swiperList"
		                                    :index="index"
		                                    :key="index"
		                            >
		                                <u-icon
		                                        :customStyle="{paddingTop:20+'rpx'}"
		                                        :name="item"
		                                        :size="22"
		                                ></u-icon>
		                                <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
		                            </u-grid-item>
		                        </u-grid>
		                    </swiper-item>
		                    <swiper-item>
		                        <u-grid :border="true">
		                            <u-grid-item
		                                    :customStyle="{width:220+'rpx',height:220+'rpx'}"
		                                    v-for="(item, index) in swiperList"
		                                    :index="index + 9"
		                                    :key="index"
		                            >
		                                <u-icon
		                                        :customStyle="{paddingTop:20+'rpx'}"
		                                        :name="item"
		                                        :size="22"
		                                ></u-icon>
		                                <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
		                            </u-grid-item>
		                        </u-grid>
		                    </swiper-item>
		                    <swiper-item>
		                        <u-grid :border="true">
		                            <u-grid-item
		                                    :customStyle="{width:220+'rpx',height:220+'rpx'}"
		                                    v-for="(item, index) in swiperList"
		                                    :index="index + 18"
		                                    :key="index"
		                            >
		                                <u-icon
		                                        :customStyle="{paddingTop:20+'rpx'}"
		                                        :name="item"
		                                        :size="22"
		                                ></u-icon>
		                                <text class="grid-text">{{ "宫格" + (index + 1) }}</text>
		                            </u-grid-item>
		                        </u-grid>
		                    </swiper-item>
		                </swiper>
		    </view>
			<view class="other_menu">
				<u-scroll-list>
				        <view v-for="(item, index) in list" :key="index">
				            <image :src="item.thumb"></image>
				        </view>
				</u-scroll-list>
				<view style="height: 64px;">
					
				</view>
			</view>
		
			
			
		
	</view>
</template>

<script>
	import headnav from '../../components/headnav.vue'
	export default {
		components:{
			headnav
		},
		data() {
			return {
				src: '/static/people/people (1).png',
				time:'2',
				promptText:'0',
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				value1: 0,
				list: [{
				                    thumb: '/static/people/people (1).png'
				                }, {
				                    thumb: '/static/people/people (2).png'
				                }, {
				                    thumb: '/static/people/people (3).png'
				                }, {
				                    thumb: '/static/people/people (4).png'
				                }, {
				                    thumb: '/static/people/people (5).png'
				                }],
				urls: [
				                    '/static/people/people (1).png',
				                    'https://cdn.uviewui.com/uview/album/2.jpg',
				                    'https://cdn.uviewui.com/uview/album/3.jpg',
				                    'https://cdn.uviewui.com/uview/album/4.jpg',
				                    'https://cdn.uviewui.com/uview/album/7.jpg',
				                    'https://cdn.uviewui.com/uview/album/6.jpg',
				                    'https://cdn.uviewui.com/uview/album/5.jpg'
				],
				 swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
			}
		},
		onLoad() {

		},
		methods: {
			click(name) {
			                this.$refs.uToast.success(`点击了第${name}个`)
			            }
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.box{
		width: 100vw;
		height: 30vh;
		background-image: url('/static/people/guide.jpg');
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		padding-right: 16rpx;
		position: relative;
		
	}
	.head_identity{
		position: absolute;
		bottom: 121rpx;
		right: 16rpx;
		z-index: 10;
	}
.last_shell{
	width: 100vw;
	min-height: 100vh;
	// display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items:center;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 50rpx;
}
.people_menu{
	width: 100vw;
	.money_right{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
.other_menu{
	width: 100vw;
	height: auto;
	padding: 0 16rpx;
}
 .swiper {
        height: 720rpx;
    }
.u-grid{
	justify-content: center !important;
}
.grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
}
.people_box_view{
	width: 100vw;
	height: 30vh !important;
	background-color: #909399;
	border-radius: 16rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-image: url('/static/people/guide.jpg');
	background-size: cover;
}
// 打字
.container {
  position: relative;
  // margin-top: 100px;
  // margin-left: 100px;
}

.text__box{
  position: relative;
  overflow: hidden;
  width: 0;
  font-size: 32px;
  line-height: 34px;
  font-family: "Courier New", Courier, monospace;
  white-space: nowrap;
  animation: width 1.5s steps(13) forwards;
  &::after {
    content: "";
    position: absolute;
    right: 0px;
    height: 32rpx;
    border-right: 1px solid #000;
    animation: showInfinite 0.5s 5 both;
  }
}
.one {
  animation-delay: 0s;
}


@keyframes width {
  0% {
    width: 0;
  }
  100% {
    width: 6em; //  单位em,表示一个字体的宽度
  }
}
@keyframes showInfinite {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
